<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传补丁</title>
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/elementui.css">
    <script src="static/js/index.js"></script>
    <script src="static/js/clipboard.min.js"></script>
</head>
<style>
    @font-face {
        font-family: element-icons;
        src: url(static/font/element-icons.woff) format('woff'), url(static/font/element-icons.ttf) format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    body {
        padding: 60px 30px;
    }

    .wrap {
        /* padding: ; */
    }

    .title {
        border-bottom: 1px solid #cecece;
        padding-bottom: 20px;
    }

    .system_time,
    .system_operate {
        display: flex;
        align-items: center;
        margin: 20px 0;
    }

    .time_name {
        font-size: 18px;
        font-weight: bold;
        margin-right: 24px;
    }

    .box_wrap {
        position: relative;
        display: flex;
        align-items: center;

        input[type='checkbox'] {
            appearance: none;
            width: 64px;
            height: 24px;
            margin: 0;
            position: position;
            border-radius: 16px;
            cursor: pointer;
            border: none;
            position: absolute;
            display: flex;
            align-items: center;
        }

        input[type="checkbox"]:before {
            content: "";
            z-index: 10;
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            left: 4px;
            top: 2px;
            border-radius: 50%;
            transition: left cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
        }

        input[type="checkbox"]:checked:before {
            content: "";
            position: absolute;
            z-index: 10;
            width: 20px;
            height: 20px;
            background: white;
            left: calc(100% - 24px);
            top: 2px;
            border-radius: 50%;
            transition: left cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
        }

        label {
            display: inline-block;
            width: 64px;
            height: 24px;
            border-radius: 16px;
            background: #9c9c9c;
            border: .5px solid rgba(117, 117, 117, 0.31);
            box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0 -3px 4px rgba(0, 0, 0, 0.15);
            padding: 0;
        }

        input[type="checkbox"]:checked+label {

            background: #46a35d;
        }
    }

    .time_reset {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex: 1;

        input[type="checkbox"] {
            margin-right: 2px;
        }
    }

    input[type="time"] {
        width: 110px;
        font-size: 16px;
    }

    .reset_item {
        margin-right: 10px;
    }

    .confirm_button {
        margin-left: 96px;
        width: 90px;
        background: #46a35d;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        color: #fff;
        cursor: pointer;
    }

    .el-input__inner {
        width: 182px;
    }

    .upload_wrap {
        flex: 1;
    }

    .note {
        margin-top: 20px;
        font-weight: bold;
    }

    .time_number {
        cursor: pointer;
    }

    .dialog_body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-dialog__header {
        display: none;
    }

    .el-dialog {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .el-dialog__body {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        padding: 0;
    }
</style>

<body>
    <div id="app">
        <div class="wrap">

            <div class="title">
                上传补丁
            </div>

            <div class="note">
                注意：上传授权过的补丁后，可以激活去控功能，请选择上传授权过正确的补丁，然后点击上传即可，如果设备关机，请重启开机上传，上传后如何判断是否激活成功呢？如果高级面板启动则激活成功，激活成功后，请不要随意上传文件，否则后果就是去控不成功！
            </div>

            <div class="system_time">
                <div class="time_name">序列号：</div>
                <div class="time_number" @click="copyText">
                    {{ id }}
                </div>
            </div>

            <div class="system_time">
                <div class="time_name">选择文件</div>
                <div class="upload_wrap">
                    <el-upload class="upload-demo" ref="upload" action="http://192.168.1.1:6789/api/upload"
                        :multiple="false" :on-success="uploadSuccess" :before-upload="beforeUploadFunction"
                        :on-progress="uploadingFunction" :show-file-list="true" limit="1" :file-list="fileList"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" round>点击上传</el-button>
                    </el-upload>
                </div>
            </div>
            <div class="confirm_button" @click="submitFunction">
                确认上传
            </div>

            <el-dialog title="" lock-scroll :close-on-click-modal="false" :close-on-press-escape="false"
                :show-close="false" :visible.sync="processShow" width="200px">
                <div class="dialog_body">
                    <el-progress width="200" ref="process" color="#f56c6c" stroke-width="12" type="circle"
                        :percentage="0"></el-progress>
                </div>
            </el-dialog>
        </div>


    </div>

    <script src="static/js/axios.js"></script>
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/elementui.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    // 文件列表
                    fileList: [],
                    // 序列号
                    id: '',
                    processShow: false,
                }
            },
            // 页面加载完后执行的回调
            mounted() {
                this.getId()
                // const that = this;
                // fetch('http://192.168.1.1:6789/api/get/sn') // 替换为你的 URL
                //     .then(response => {
                //         if (!response.ok) {
                //             throw new Error('网络响应失败');
                //         }
                //         return response.json(); // 解析JSON格式的响应体
                //     })
                //     .then(data => {
                //         console.log(
                //             "已执行此处", 
                //         );
                        
                //         // 现在data是一个解析后的JavaScript对象
                //         that.id = data; // 假设data对象有一个属性叫做id
                //     })
                //     .catch(error => {
                //         // 错误处理
                //         console.error('发生错误:', error);
                //     });
            },
            created() {
            },
            methods: {
                

                async getId() {
                    const res = await axios('http://192.168.1.1:6789/api/get/sn')

                    if(res.statusText != "OK") {
                        this.$message.error('网络响应失败')
                        throw new Error('网络响应失败');
                    } else {
                        this.id = res.data
                    }
                    console.log('返回值', res);
                },
                // 保存调用函数
                submitFunction() {
                    // if(!this.fileList.length) {
                    //     return
                    // }

                    this.$refs.upload.submit();
                    console.log('点击了提交按钮');
                },
                // 上传成功提示
                uploadSuccess() {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    })
                },
                // 上传文件之前校验
                beforeUploadFunction() {
                    // 显示进度条
                    this.processShow = true
                },
                // 点击复制序列号
                copyText() {
                    console.log(111);
                    const that = this
                    var clipboard = new ClipboardJS('.time_number', {
                        target: function () {
                            //获取文档中第一个 <div> 元素：
                            return document.querySelector('.time_number')
                            //复制成功响应
                        },
                    })
                    clipboard.on('success', function (e) {
                        that.$message({
                            message: '复制成功',
                            type: 'success'
                        })
                    });

                    //复制失败响应
                    clipboard.on('error', function (e) {
                        console.log(e);
                    });
                },

                uploadingFunction() {
                    if (event.type === 'progress') {
                        // 计算上传进度
                        const progress = parseInt(event.percent, 10);
                        // 更新进度条的值
                        this.process = progress;
                        this.$refs.process.percentage = progress
                        if (progress == 100) {
                            this.processShow = false
                            this.$message({
                                message: '上传成功',
                                type: 'success'
                            })
                        }
                    }
                },
            }
        })
    </script>
</body>

</html>